<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
	<!-- include meta, stylesheets, jquery and title -->
	<ui:include src="/WEB-INF/master/implement.xhtml" />
</h:head>

<h:body>

	<!-- display items in list format -->

	<ui:include src="/WEB-INF/master/header.xhtml" />

	<div class="container navigation">
		<ui:include src="/WEB-INF/master/navigation.xhtml" />
		<div class="col-md-10">

			<ui:include src="/WEB-INF/master/offerHeader.xhtml" />

			<h:form id="add">
				<div class="row-fluid">
				
					<!-- actual items -->
					<ui:repeat var="i" value="#{productContainer.products}" offset="#{productContainer.start}" size="#{productContainer.end}">
						<div class="row-fluid">
							<div class="col-sm-3">
								<table class="table">
									<thead>
										<tr>
											<th style="text-align: center">##{i.id} - #{i.name}</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td style="text-align: center">
												<h:commandLink action="#{productController.ProductDetail(i.productId)}">
													<h:graphicImage rendered="#{i.shiny == false}" value="resources/img/normal/#{i.id}.png" width="150" height="150" />
													<h:graphicImage rendered="#{i.shiny == true}" value="resources/img/shiny/#{i.id}.png" width="150" height="150" />
												</h:commandLink>
											</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-3">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="2">Allgemeine Infos</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td class="span1">Typ:</td>
											<td class="span1">#{i.type1} #{i.type2}</td>
										</tr>
										<tr class="table-bordered">
											<td>Level:</td>
											<td>#{i.level}</td>
										</tr>
										<tr class="table-bordered">
											<td>Wesen:</td>
											<td>#{i.nature}</td>
										</tr>
										<tr class="table-bordered">
											<td>Fähigkeit:</td>
											<td>#{i.ability}</td>
										</tr>
										<tr class="table-bordered">
											<td>Geschlecht:</td>
											<td>#{i.gender}</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-3">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="2">Attacken</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>#{i.attack1}</td>
											<td>#{i.attack2}</td>
										</tr>
										<tr class="table-bordered">
											<td>#{i.attack3}</td>
											<td>#{i.attack4}</td>
										</tr>
										<tr>
											<td colspan="2" style="border: 0">&nbsp;</td>
										</tr>
										<tr>
											<td colspan="2" style="border: 0">&nbsp;</td>
										</tr>
										<tr class="table-bordered">
											<td colspan="2" style="text-align: center">
												<h:form rendered="#{i.specialPrice != 0}">
													Preis: <s>
														<h:outputText value="#{i.normalPrice}">
															<f:convertNumber pattern="#0.00" />
														</h:outputText>€</s>&nbsp; 
														<h:outputText value="#{i.specialPrice}">
															<f:convertNumber pattern="#0.00" />
														</h:outputText>€
												</h:form> 
												<h:form rendered="#{i.specialPrice == 0}">
													Preis: 
														<h:outputText value="#{i.normalPrice}">
															<f:convertNumber pattern="#0.00" />
														</h:outputText>€
												</h:form>
											</td>
										</tr>
									</tbody>
								</table>
							</div>

							<div class="col-sm-3">
								<table class="table table-borderless">
									<thead>
										<tr class="table-bordered">
											<th colspan="4">EV-Werte</th>
										</tr>
									</thead>
									<tbody>
										<tr class="table-bordered">
											<td>KP</td>
											<td>#{i.evHp}</td>
											<td>Sp.-Ang.</td>
											<td>#{i.evSpatk}</td>
										</tr>
										<tr class="table-bordered">
											<td>Angriff</td>
											<td>#{i.evAtk}</td>
											<td>Sp.-Ver.</td>
											<td>#{i.evSpdef}</td>
										</tr>
										<tr class="table-bordered">
											<td>Vert.</td>
											<td>#{i.evDef}</td>
											<td>Init.</td>
											<td>#{i.evInit}</td>
										</tr>
										<tr>
											<td colspan="4" style="border: 0">&nbsp;</td>
										</tr>
										<tr class="table-bordered" id="add">
											<td colspan="4" style="text-align: center">
												<p:commandLink rendered="#{i.inBasket == false}" update=":add" oncomplete="$('#addProduct').modal('show'); return false;" action="#{orderController.addProductToOrder(i)}">
													In den Warenkorb
												</p:commandLink>
												<h:panelGrid rendered="#{i.inBasket == true}">
													Artikel bereits im Warenkorb
												</h:panelGrid>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</ui:repeat>
				</div>
			
				<!-- pagination to toggle between products -->
				<div class="row-fluid">
					<div class="control" style="text-align: center">
						<ul class="pagination pagination-centered">
							<li><h:commandLink value="&laquo;" action="#{productContainer.backward()}" rendered="#{productContainer.isVisible()}" disabled="#{!productContainer.isBackwardEnabled()}" /></li>
							<ui:repeat var="current" value="#{productContainer.pages}">
								<li class="active"><h:commandLink value="#{current}" action="#{productContainer.setPage(current)}" rendered="#{productContainer.isActive(current)}" /></li>
								<li><h:commandLink value="#{current}" action="#{productContainer.setPage(current)}" rendered="#{!productContainer.isActive(current)}" /></li>
							</ui:repeat>
							<li><h:commandLink value="&raquo;" action="#{productContainer.forward()}" rendered="#{productContainer.isVisible()}" disabled="#{!productContainer.isForwardEnabled()}" /></li>
						</ul>
					</div>
				</div>
			
			</h:form>
		</div>
	</div>

	<!-- modal message after adding a product to the basket -->
	<div class="modal fade" id="addProduct" role="dialog">
		<div class="modal-dialog">
			<div class="modal-content">
				<form class="form-horizontal">
					<div class="modal-body">
						<h4>Artikel erfolgreich dem Warenkorb hinzugefügt</h4>
					</div>
				</form>
			</div>
		</div>
	</div>

</h:body>
</html>
